<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="../src/css/public.css">
    <link rel="stylesheet" href="../src/css/index.css">
    <link rel="stylesheet" href="../src/css/swiper-bundle.css">
</head>
<body>
   <div class="top">
       <div class="item">
           <div class="logo">
                <div class="medial">
                    <p>RHINE Cake</p>
                </div>
                <div class="right">
                    <div class="left">
                        <img src="../src/image/index/telephone.png" alt="">
                    </div>
                    <div class="tit">
                        <p>400-823-8820</p>
                    </div>
                </div>
           </div>
       </div>
   </div> 
   <!-- 导航 -->
   <div class="nav">
        <ul>
            <a href=""></a>
            <li>
                <a href="./index.html">首页</a></li>
            <li>
                <a href="./goods.html">味觉空间</a></li>
            <li>
                <a href="./active.html">最新活动</a></li>
            <li>
                <a href="./vip.html">会员中心</a></li>
            <li>
                <a href="./story.html">品牌故事</a></li>
            <li>
                <a href="./call.html">联系我们</a></li>
        </ul>
   </div>
   <!-- banner -->
   <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="../src/image/index/banner.jpg"></div>
      <div class="swiper-slide"><img src="../src/image/index/banner1橙色.jpg"></div>
      <div class="swiper-slide"><img src="../src/image/index/banner2.jpg"></div>
    </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>
    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
   <!-- 领券下单 -->
   <div class="banner2">
           <p class="p1">先领券 后下单</p>
           <p class="p2">有优惠 更美味</p>
           <p class="p3">立即查看</p>
       <div class="img"></div>
   </div>
   <!-- 产品1 -->
   <div class="goods1">
        <ul>
            <li>
                <div><img src="../src/image/index/cp1.jpg" alt=""></div>
                <p class="p1">雪域牛乳芝士</p>
                <p class="p2">甄选澳洲进口全脂纯牛奶</p>
                <p class="p3">¥288</p>
            </li>
            <li>
               <div> <img src="../src/image/index/cp2.jpg" alt=""></div>
                <p class="p1">甜美风公主蛋糕</p>
                <p class="p2">手工打发的奶油搭配彩色棉花糖</p>
                <p class="p3">¥268</p>
            </li>
            <li>
                <div><img src="../src/image/index/cps.jpg" alt=""></div>
                <p class="p1">德式巧克力松露蛋糕</p>
                <p class="p2">经典的传世典作无法拒绝的巧克力</p>
                <p class="p3">¥238</p>
            </li>
            <li>
                <div><img src="../src/image/index/cp4.jpg" alt=""></div>
                <p class="p1">桂圆冰淇淋蛋糕</p>
                <p class="p2">每一口都是沉浸的甜蜜</p>
                <p class="p3">¥268</p>
            </li>
            <li>
                <div><img src="../src/image/index/cp5.jpg" alt=""></div>
                <p class="p1">关山樱花芝士蛋糕</p>
                <p class="p2">甄选澳洲进口全脂纯牛奶</p>
                <p class="p3">¥268</p>
            </li>
            <li>
                <div><img src="../src/image/index/cp6.jpg" alt=""></div>
                <p class="p1">黄金燕麦香芋蛋糕</p>
                <p class="p2">甄选澳洲进口全脂纯牛奶</p>
                <p class="p3">¥288</p>
            </li>
            <li>
                <div><img src="../src/image/index/cp7.jpg" alt=""></div>
                <p class="p1">蝶恋花景鲜奶蛋糕</p>
                <p class="p2">层次丰满 入口即化</p>
                <p class="p3">¥268</p>
            </li>
            <li>
                <div><img src="../src/image/index/cp8.jpg" alt=""></div>
                <p class="p1">抹茶红豆乳酪蛋糕</p>
                <p class="p2">甄选新西兰乳牛鲜奶酪</p>
                <p class="p3">¥288</p>
            </li>
        </ul>
   </div>
   <!-- --------------------------配送--------------------------------- -->
   <div class="distribution">
        <div class="tops">
            <p class="p1">BRAND SERVICK</p>
            <p class="p2">ABOUT LAILIN CAKE</p>
        </div>
        <div class="main">
            <div class="img"></div>
        </div>
        <div class="con">
            <div class="text">
                <p class="p1">气调保鲜 开盒即食</p>
                <p class="p2">采用气体调节技术，将包装盒内空气置换成氮气，达到抑制<br>微生物生长的目的,每一口都犹如刚烘焙好的新鲜</p>
            </div>
            <div class="text">
                <p class="p1">专用冰袋+保温箱</p>
                <p class="p2">全程冷链条，独家定制专用冰袋和高密封性保温箱双重保护<br>食品的新鲜，留住每一帧的香甜</p>
            </div>
        </div>
   </div>
   <!-- 尾巴 -->
   <div class="kuang">
        <div class="top">
        </div>
        <div class="bottom">
        <div class="left">
                <div class="p1">RHINE CAKE</div>
                <div class="p2">订购热线：4006-688-688</div>
                <div class="p3">客服邮箱：JS@LCcake.com</div>
                <div class="p3">总部地址：杭州市西湖区长江路与中原大道交叉k口向南200米</div>
                <div class="p3">食品生产许可:SC12031010800121</div>
        </div>
        <div class="between">
            <ul>
                <li>关于我们</li>
                <li>企业介绍</li>
                <li>招贤纳士</li>
                <li>呼叫中心</li>
            </ul>
            <ul>
                <li>帮助中心</li>
                <li>投诉与建议</li>
                <li>购物指南</li>
                <li>支付种类</li>
            </ul>
            <ul>
                <li>发现</li>
                <li>公告</li>
               
            </ul>
            <ul>
                <li>客服服务</li>
            </ul>
        </div>
        <div class="right">
        </div>
    </div>
   </div>
   <script src="../src/js/swiper-bundle.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper('.swiper-container', {
      spaceBetween: 30,
      centeredSlides: true,
      autoplay: {
        delay: 2500,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  </script>
</body>
</html>